<template>
	<view class="my-header">
		<view class="my-back"></view>
		<view class="my-info">
			<image 
				class="image-content"
				src="https://picsum.photos/id/20/200/300"
				>
			</image>
			<view class="user-detail">
				<view><text class="user-name">陈东</text></view>
				<view>
					<text class="user-order">
						职聊号：xxxxxxxxxxx
					</text>
				</view>
			</view>
		</view>
	</view>
	<view class="my-content">
		<view class="my-trace">
			<navigator class='trce-cue' url="/pages/my/interract/index" hover-class="navigator-hover">
				<text class="cue-num">489</text>
				<text class="cue-tit">沟通过</text>
			</navigator>
			<navigator class='trce-cue' url="/pages/my/interview/index" hover-class="navigator-hover">
				<text class="cue-num">0</text>
				<text class="cue-tit">待面试</text>
			</navigator>
			<navigator class='trce-cue' url="/pages/my/collect/index" hover-class="navigator-hover">
				<text class="cue-num">8</text>
				<text class="cue-tit">收藏</text>
			</navigator>
		</view>
		<jian-li></jian-li>
		<other-set></other-set>
		<view>
			<navigator class="nav-btn" url="" hover-class="navigator-hover">
				<button class="btn-out">退出登录</button>
			</navigator>
			
		</view>
		<view class="footer">
			<text>客服电话:400-065-5799 工作时间:8:00-22:00</text><br/>
			<text>老年人直连热线:400-661-6030 工作时间8:00-22:00</text><br/>
			<text>人力资源许可证 营业执照</text><br/>
			<text>朝阳区人社局监督电话:(010)57596212，(010)65090445</text><br/>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import JianLi from "./component/curriculumNotes.vue"
	import OtherSet from "./component/otherSet.vue"
</script>

<style lang="scss" scoped>
	.my-header{
		width: 100%;
		height: 452rpx;
		padding-top: 88rpx;
		background: linear-gradient(180deg,
				#005eff 0%,
				#00cbff 100%,
				rgba(0, 170, 255, 0.85) 100%);
		.my-back{
			width: 100%;
			height: 108rpx;
			padding-top:42rpx;
			padding-left:34rpx;
			color: #fff;
		}
		.my-info{
			width: 100%;
			height: auto;
			padding-left: 22rpx;
			display: flex;
			flex-direction: row;
			.image-content{
				width: 120rpx;
				height: 120rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 4rpx solid #FFFFFF;
				background-color: #fffb;
			}
			.user-detail{
				margin-left: 44rpx;
				color: #fff;
				@mixin font-set {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
				.user-name{
					@include font-set();
					width: 88rpx;
					height: 64rpx;
					font-size: 44rpx;
					line-height: 64rpx;
				}
				.user-order{
					@include font-set();
					width: 312rpx;
					height: 46rpx;
					font-size: 32rpx;
					line-height: 46rpx;
				}
			}
		}
	}
	.my-content{
		width: 750rpx;
		min-height: 1362rpx;
		background: #F1F7FF;
		box-shadow: 0 0 2rpx 0 rgba(0,0,0,0.04), 0 4rpx 12rpx 0 rgba(0,0,0,0.04), 0 20rpx 40rpx 0 rgba(0,0,0,0.04);
		display: flex;
		flex-direction: column;
		position: absolute;
		top:356rpx;
		border-radius: 36rpx;
		.my-trace{
			width: 614rpx;
			height: 100rpx;
			margin: 38rpx 68rpx;
			display: flex;
			justify-content: space-between;
			.trce-cue{
				display: flex;
				flex-direction: column;
				justify-content: center;
				.cue-num{
					height: 40rpx;
					font-family: DIN, DIN;
					font-weight: 500;
					font-size: 52rpx;
					color: #1C1C1C;
					line-height: 40rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}
				.cue-tit{
					margin-top: 9rpx;
					height: 40rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #5A5A5A;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
			}
			.navigator-hover{
				background-color: transparent;
			}	
		}
		.nav-btn{
			width: 700rpx;
			height: 84rpx;
			margin: 0 auto;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}
		.btn-out{
			width: 700rpx;
			height: 84rpx;
			margin: 0 auto;
			margin-top: 40rpx;
			background-color: transparent;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 2rpx solid #5A5A5A;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 500;
			font-size: 36rpx;
			color: #1C1C1C;
		}
		.footer{
			width: 652rpx;
			height: 136rpx;
			margin: 0 auto;
			margin-top: 42rpx;
			text-align: center;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			font-size: 24rpx;
			color: #9E9E9E;
		}
	}
</style>